<template>
  <view class="transfer">
    <classifyHead title="订购积分转让" />
    <view class="middle">
      <image src="../../static/WoDEMingXiBg.png" mode="aspectFill" />
      <view class="middle-item">
        <view class="left">
          <image src="../../static/MorenTx.png" mode="aspectFill" />
          <view style="margin-top: 10rpx">用户名125487</view>
          <view>ID:875896</view>
        </view>
        <view class="right">
          <view class="scoreName">
            <view class="right-scoreName">
              <view>订购积分</view>
              <view style="margin-top: 20rpx">58745424.00</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="count" style="margin-bottom: 20rpx;">
        <view>可转让数量: </view>
        <view>58745424.00</view>
      </view>
      <view class="transfer-info">
        <view>转让数量</view>
        <input type="text" placeholder="请输入转让数量" v-model="params.count" />
      </view>
      <view class="transfer-info">
        <view>受让人ID </view>
        <input type="text" placeholder="请输入受让人ID" v-model="params.userID" />
      </view>
      <view class="transfer-info">
        <view>手机号 </view>
        <input type="text" placeholder="请输入手机号" v-model="params.phone" />
      </view>
      <view class="transfer-info" style="border-bottom: none;">
        <view>应付竞购积分 </view>
      </view>
      <view class="other">*转让不可激回，请确认您转让ID的准确性</view>
      <button class="btn">确认转让</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import classifyHead from "@/components/classifyHead.vue";
//输入框的数据
const params = ref({
     count: "", 
     userID: "", 
     phone: "" 
     });
</script>

<style lang="scss" scoped>
.transfer {
  .middle {
    width: calc(100% - 40rpx);
    margin: 20rpx;
    height:250rpx;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

    .middle-item {
      width: 100%;
      position: absolute;
      top:36rpx;
      left: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .left {
        image {
          width:100rpx;
          height:100rpx;
          border-radius: 30rpx;
        }
      }

      .right {
        .scoreName {
          display: flex;
          align-items: center;

          .right-scoreName {
            margin-top:80rpx;
            text-align: center;
            margin-left: 20rpx;

            view:first-child {
              font-size: 34rpx;
            }

            view:last-child {
              font-size: 32rpx;
            }
          }
        }
      }
    }
  }
  .content {
    margin: 40rpx 20rpx;
    .count,
    .transfer-info {
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
      width: calc(100% - 30rpx);
      height: 100rpx;
      padding: 0 15rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .transfer-info {
      height: 150rpx;
      border-bottom: 1px solid #ccc8c8;
      input {
        width: 220rpx;
        text-align: right;
      }
      
    }
    .other{
        margin-top: 40rpx;
    }
    .btn{
        margin-top: 80rpx;
        width:310rpx;
        height: 100rpx;
        background: #5756b3;
        color: #fff;
        font-size: 32rpx;
        font-weight: bold;
        border-radius: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;

    }
  }
}
</style>